<template>
    <MoveLayout :option="option" :index="index">
        <a-row :gutter="option.options.RowGutter">
            <a-col class="FormItem" v-for="(item, index) in option.options.ColArray" :span="item">
                <dragView :list="option.slots['Col_' + index]" />
            </a-col>
        </a-row>
        <a-modal v-model:visible="SettingStatus" destroyOnClose :width="800" title="行配置" @ok="handleOk">
            <Option :gutter="option.options.RowGutter" :Cols="option.options.ColArray" ref="RowConfigView" />
        </a-modal>
    </MoveLayout>
</template>
<script setup>
import { provide, ref } from "vue";
import Option from "./Option.vue";
import MoveLayout from "../MoveLayout.vue";
import dragView from "../dragView.vue";

const props = defineProps(["option", "index"]);

const SettingStatus = ref(false);
const RowConfigView = ref();

const handleOk = function () {
    var val = RowConfigView.value.GetValue();
    props.option.options.ColArray = [...val.Cols];
    props.option.options.RowGutter = val.gutter;
    props.option.options.ClassName = val.class;

    var _slots = {};

    for (let i = 0; i < props.option.options.ColArray.length; i++) {
        _slots["Col_" + i] = [];
    }

    for (const key in _slots) {
        if (props.option.slots[key]) {
            _slots[key] = props.option.slots[key];
        }
    }
    props.option.slots = _slots;

    SettingStatus.value = false;
};

provide("ClickMappingOption", function () {
    SettingStatus.value = true;
});
</script>
<style scoped>
.Title {
    padding: 0 8px;
    cursor: move;
}

.options {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
}

.icon {
    cursor: pointer;
    padding: 0 4px;
}

.icon:hover {
    color: #7974ff;
}
</style>
